<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{title}}</h1>
        <parent></parent>
    </div>


    <template id="parent">
        <div>
            <h4 ref="title">父组件-----parent</h4>
            <!-- <p>{{word}}</p> -->
            <div>

                <input type="text" v-model="word">
            </div>
            <button @click="show=!show">{{show?'点击隐藏':'点击显示'}}</button>
            <button @click="changeByRef">通过 refs 操作子组件</button>
            <hr>
            <child-one :word="word" :show="show"></child-one>
            <hr>
            <child-two ref="two"></child-two>
        </div>
    </template>



    <template id="one">
        <div>
            <h4>子组件-----child--1</h4>
            <!-- 父组件改子组件 -->
            <h2>word----{{word}}</h2>
            <p class="animate__animated animate__slideInDown" v-if="show"
                :style="{width:'100px',height:'100px',background:'red' ,}">什么玩意
            </p>
            <!-- <p>嗯</p> -->
        </div>
    </template>


    <template id="two">
        <div>
            <h4>子组件-----child--2</h4>
            <h1>num---{{num}}</h1>

        </div>
    </template>




</body>
<script>

    Vue.component("parent", {
        template: "#parent",
        // props: ["word"],
        methods: {
            changeByRef() {
                this.$refs.two.num += 10
                this.$refs.two.doneList()
            }
        },
        mounted() {
            console.log(this.$refs)
            this.$refs.title.style.color = "red";
        },
        data() {
            return {
                word: "再来一次?????",
                show: true,
            }
        },
        components: {
            childOne: {
                template: "#one",
                props: ["word", "show"],
            }
        }
    })

    Vue.component("childTwo", {
        template: "#two",
        methods: {
            doneList() {
                console.log("点击了我完成了数据渲染");
            }
        },
        data() {
            return {
                num: 8848,
            }
        }
    })

    const vm = new Vue({
        data: {
            title: "Vue 组件通信 - 父改子",
            // word: "做大做强 再创辉煌",
        }
    }).$mount("#app")
</script>

</html>